<nz-card class="m-b-2">
  <div class="zdy-seach-wrap">
    <div nz-space class="seach-content">
      <div *nzSpaceItem class="seach-item">
        <label class="seach-label">综合搜索</label>
        <div class="seach-control">
          <input style="width: 240px;" nz-input placeholder="用户ID/手机号码/ID/关联单号/交易流水" [(ngModel)]="seachParams.num" />
        </div>
      </div>

      <div *nzSpaceItem class="seach-item">
        <label class="seach-label">发生时间</label>
        <div class="seach-control">
          <nz-range-picker
            nzAllowClear
            nzInputReadOnly
            nzFormat="yyyy-MM-dd"
            [(ngModel)]="dateArrs"
            (ngModelChange)="dateChange($event)">
          </nz-range-picker>
        </div>
      </div>

      <div *nzSpaceItem class="seach-item">
        <label class="seach-label">收支类型</label>
        <div class="seach-control">
          <nz-select
            nzMode="multiple"
            [nzMaxTagCount]="1"
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="全部"
            [(ngModel)]="incomeExpendSelected">
            <nz-option
              *ngFor="let item of incomeExpenditureOptions"
              [nzLabel]="item.name"
              [nzValue]="item.content">
            </nz-option>
          </nz-select>
        </div>
      </div>

      <div *nzSpaceItem class="seach-item" [hidden]="!isCollapse">
        <label class="seach-label">收益审核状态</label>
        <div class="seach-control">
          <nz-select
            nzMode="multiple"
            [nzMaxTagCount]="1"
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="全部"
            [(ngModel)]="profitExamineSelected">
            <nz-option
              *ngFor="let item of profitExamineOptions"
              [nzLabel]="item.label"
              [nzValue]="item.id">
            </nz-option>
          </nz-select>
        </div>
      </div>

      <div *nzSpaceItem class="seach-item" [hidden]="!isCollapse">
        <label class="seach-label">收益到账状态</label>
        <div class="seach-control">
          <nz-select
            nzMode="multiple"
            [nzMaxTagCount]="1"
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="全部"
            [(ngModel)]="profitArrivalSeleected">
            <nz-option
              *ngFor="let item of profitArrivalOptions"
              [nzLabel]="item.label"
              [nzValue]="item.id">
            </nz-option>
          </nz-select>
        </div>
      </div>

      <div *nzSpaceItem class="seach-item">
        <button nz-button nzType="primary" class="m-r-8" (click)="queryData()">查询</button>
        <button nz-button nzType="default" (click)="resetData()">重置</button>
        <button nz-button nzType="link" (click)="isCollapse = !isCollapse">
          {{ isCollapse ? '收起' : '展开' }}<i nz-icon [nzType]="isCollapse ? 'up' : 'down'" nzTheme="outline"></i>
        </button>
      </div>
    </div>
  </div>
</nz-card>

<nz-card>
  <main class="pagination-wrap-position">
    <div nz-space class="table-opera">
      <button
        *nzSpaceItem
        nz-button
        nzType="primary"
        (click)="batchAudit()"
      >批量审核</button>

      <button
        *nzSpaceItem
        nz-button
        nzType="primary"
        [nzDanger]="siwtchType == 1 ? true : false"
        (click)="examineSwitch()"
      >收益自动审核 : {{ siwtchType == 0 ? '已开启' : '已关闭' }}</button>

      <button
        *nzSpaceItem
        nz-button
        nzType="primary"
        [nzLoading]="exportLoading"
        (click)="exportTable()"
      >导出</button>
    </div>
  
    <!-- Table -->
    <div class="table-wrap">
      <nz-table
        #basicTable
        nzSize="small"
        nzShowSizeChanger
        nzShowQuickJumper
        nzOuterBordered
        [nzScroll]="{ x: '1000px' }"
        [nzFrontPagination]="false"
        [nzLoadingDelay]="100"
        [nzLoading]="tableParams.tableLoading"
        [nzData]="tableData"
        [nzPageSizeOptions]="[2, 5, 10, 20, 50, 100]"
        [nzTotal]="tableParams.total"
        [nzPageIndex]="tableParams.page"
        [nzPageSize]="tableParams.pageSize"
        [nzShowTotal]="totalTemplate"
        (nzPageIndexChange)="onPageIndexChange($event)"
        (nzPageSizeChange)="onPageSizeChange($event)"
        (nzCurrentPageDataChange)="onCurrentPageDataChange($event)"
      >
        <thead>
          <tr>
            <th
              [nzDisabled]="disabledAll"
              [(nzChecked)]="checked"
              [nzIndeterminate]="indeterminate"
              (nzCheckedChange)="onAllChecked($event)"
              nzLeft
              nzWidth="95px"
            ></th>
            <th nzAlign="center" nzWidth="95px" nzLeft>ID</th>
            <th nzAlign="center" nzWidth="95px">用户ID</th>
            <th nzAlign="center" nzWidth="140px">手机号码</th>
            <th nzAlign="center" nzWidth="140px">收支类型</th>
            <th nzAlign="center" nzWidth="180px">发生时间</th>
            <th nzAlign="center" nzWidth="120px">爱豆明细</th>
            <th nzAlign="center" nzWidth="180px">关联单号</th>
            <th nzAlign="center" nzWidth="180px">交易流水</th>
            <th nzAlign="center" nzWidth="140px">收益审核状态</th>
            <th nzAlign="center" nzWidth="140px">收益到账状态</th>
            <th nzAlign="center" nzWidth="180px">收益到账时间</th>
          </tr>
        </thead>
  
        <tbody>
          <tr *ngFor="let data of basicTable.data">
            <td
              nzLeft
              [nzChecked]="setOfCheckedId.has(data.id)"
              [nzDisabled]="isDisabled(data)"
              (nzCheckedChange)="onItemChecked(data.id, $event, data)">
            </td>
            <td nzAlign="center" nzLeft>{{ data.id }}</td>
            <!-- 用户ID -->
            <td nzAlign="center">{{ data.userId }}</td>
            <!-- 手机号码 -->
            <td nzAlign="center">{{ data.phone || '-' }}</td>
            <!-- 收支类型 -->
            <td nzAlign="center">{{ typeFilter(data.transactionType) }}</td>
            <!-- 发生时间 -->
            <td nzAlign="center">{{ data.createTime || '-' }}</td>
            <!-- 爱豆明细 -->
            <td nzAlign="center">
              <span class="happen-mon" [ngClass]="{'color-red': data.changeType == 2, 'color-green': data.changeType != 2}">
                {{ data.changeType == 2 ? ('-' + (data.amount | number : '0.2-2')) : ('+' + (data.amount | number : '0.2-2')) }}
              </span>
            </td>
            <!-- 关联单号 -->
            <td nzAlign="center">{{ (data.businessNo || data.businessNo == 0) ? data.businessNo : '-' }}</td>
            <!-- 交易流水 -->
            <td nzAlign="center">{{ (data.billNo && data.billNo !== '0') ? data.billNo : '-' }}</td>
            <!-- 收益审核状态 -->
            <td nzAlign="center">
              <ng-container *ngIf="[1, 2, 3, 25].includes(data.transactionType);else templateAudit">
                <span [ngStyle]="{'color': data.auditStatus | profitExamineStatus: 'color'}">
                    {{ data.auditStatus | profitExamineStatus: 'text' }}
                </span>
              </ng-container>
              <ng-template #templateAudit>-</ng-template>
            </td>
            <!-- 收益到账状态 -->
            <td nzAlign="center">
              <ng-container *ngIf="[1, 2, 3, 25, 27].includes(data.transactionType);else templateTransa">
                <span [ngStyle]="{'color': data.status | profitArrivalStatus: 'color'}">
                  {{ data.status | profitArrivalStatus: 'text' }}
                </span>
              </ng-container>
              <ng-template #templateTransa>-</ng-template>
            </td>
            <!-- 收益到账时间 -->
            <td nzAlign="center">{{ data.accountTime || '-' }}</td>
          </tr>
        </tbody>
      </nz-table>
  
      <!-- 分页template -->
      <ng-template #totalTemplate let-total>共有 {{ tableParams.total }} 条</ng-template>
    </div>
  </main>
</nz-card>

<!-- 批量审核 modal START -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [nzWidth]="500"
  [(nzVisible)]="isExamineVisible"
  nzTitle="审核"
  (nzOnCancel)="handleCancel()">

  <div *nzModalContent>
    <div class="custom-model-body">
      <div class="examine-fm">
        <p class="examine-label">审核意见:</p>
        <textarea rows="5" nz-input [(ngModel)]="auditDesc"></textarea>
      </div>
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="default" (click)="handleCancel()">取消</button>
        <button nz-button nzType="primary" [nzLoading]="isAdoptLoading" (click)="handleOk(1)">审核通过({{ setOfCheckedId.size }})</button>
        <button nz-button nzType="default" nzDanger [nzLoading]="isFailLoading" (click)="handleOk(2)">审核不通过({{ setOfCheckedId.size }})</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- 批量审核 modal END -->